<template>
  <div class="create-post">
    <textarea
      v-model="postContent"
      placeholder="分享你的想法..."
      @input="autoResize"
      ref="textarea"
    ></textarea>
    <div class="post-actions">
      <div class="image-upload">
        <label for="image-input">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <circle cx="8.5" cy="8.5" r="1.5"></circle>
            <polyline points="21 15 16 10 5 21"></polyline>
          </svg>
        </label>
        <input
          type="file"
          id="image-input"
          accept="image/*"
          multiple
          @change="handleImageUpload"
          style="display: none"
        />
      </div>
      <button @click="submitPost" :disabled="!postContent.trim()">发布</button>
    </div>
    <div v-if="selectedImages.length > 0" class="image-preview">
      <div
        v-for="(image, index) in selectedImages"
        :key="index"
        class="image-item"
      >
        <img :src="image" :alt="`Selected image ${index + 1}`" />
        <button @click="removeImage(index)" class="remove-image">
          &times;
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const postContent = ref('')
const selectedImages = ref([])
const textarea = ref(null)

const emit = defineEmits(['post-created'])

const autoResize = () => {
  textarea.value.style.height = 'auto'
  textarea.value.style.height = textarea.value.scrollHeight + 'px'
}

const handleImageUpload = (event) => {
  const files = event.target.files
  for (let i = 0; i < files.length; i++) {
    const reader = new FileReader()
    reader.onload = (e) => {
      selectedImages.value.push(e.target.result)
    }
    reader.readAsDataURL(files[i])
  }
}

const removeImage = (index) => {
  selectedImages.value.splice(index, 1)
}

const submitPost = () => {
  if (postContent.value.trim()) {
    const newPost = {
      id: Date.now(),
      author: {
        name: '当前用户',
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg'
      },
      content: postContent.value,
      images: selectedImages.value,
      likes: 0,
      comments: 0,
      createdAt: new Date().toISOString()
    }
    emit('post-created', newPost)
    postContent.value = ''
    selectedImages.value = []
    autoResize()
  }
}
</script>

<style scoped>
.create-post {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  resize: none;
  font-size: 16px;
  margin-bottom: 10px;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-upload label {
  cursor: pointer;
  color: #4a5568;
}

button {
  padding: 8px 16px;
  background-color: #1e40af;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.image-item {
  position: relative;
  width: calc(33.333% - 7px);
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
